<!DOCTYPE html>
<html>

<head>
     
  <meta charset="UTF-8">
     
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <div style="position: absolute;">
            <canvas id="canvas" style='width:100%;height:100%' onclick="pauseBtnShow()"></canvas>
            <div id="pauseBtn" onclick="startOrPause()"
      style="z-index: 2; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; max-width: 75px; max-height: 75px; margin: auto; opacity: 0.7; cursor: pointer; display: none;">
      <svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 200 200" alt="Play video">
        <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"></circle>
        <polygon points="70, 55 70, 145 145, 100" fill="#fff"></polygon>
      </svg>
    </div>
        </div>
     
  <script src="jsmpeg.min.js"></script>
     
  <script>
    var player = new JSMpeg.Player('ws://localhost:9990', {
      canvas: document.getElementById('canvas'),
      autoplay: false,//是否自动播放
      loop: true,
    });

    function startOrPause () {
      if (player.isPlaying) {
        player.pause();
      }
      else {
        player.play();
        document.getElementById('pauseBtn').style.display = 'none'
      }
    }
    function pauseBtnShow () {
      if (player.isPlaying) {
        player.pause();
        document.getElementById('pauseBtn').style.display = 'block'
      }
    }
  </script>
</body>

</html>